<!DOCTYPE html>
<html>

<head>
    <title>leaflet-canvas-marker</title>
    <meta charset="utf-8" />
    <!-- 引入leafletapi -->
    <link rel="stylesheet" href="../lib/leaflet/leaflet.css" />
    <script src="../lib/leaflet/leaflet.js"></script>
    <!-- 引入leaflet-canvas-marker插件,已解决了缩放时飘的问题 -->
    <script src="../lib/leaflet/plugins/leaflet.canvas-markers.js"></script>
    <style>
        body {
            margin: 0;
        }

        .map {
            position: absolute;
            height: 100%;
            right: 0;
            left: 0;
        }

        .menuBar {
            position: relative;
            text-align: center;
            top: 10px;
            margin: 0 50px;
            padding: 5px;
            border-radius: 3px;
            z-index: 999;
            color: #ffffff;
            background-color: rgba(0, 168, 0, 1);
        }
    </style>
</head>

<body>
    <div class="map" id="map"></div>
    <div class="menuBar">
        10万条数据，缩小地图感受一下
    </div>
    <script>
        var map = L.map('map', {
            center: [39.905963, 116.390813],
            zoom: 15,
            preferCanvas: true //使用canvas模式渲染矢量图形 
        });
        //添加底图
        var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
        //使用canvas模式渲染marker
        var ciLayer = L.canvasIconLayer({}).addTo(map);
        var icon = L.icon({
            iconUrl: '../img/pothole.png',
            iconSize: [20, 18],
            iconAnchor: [10, 9]
        });
        for (var i = 0; i < 100000; i++) {
            var lat = 39.905963 + (Math.random() - Math.random()) * 3;
            var lng = 116.390813 + (Math.random() - Math.random()) * 3;
            var marker = L.marker([lat, lng], {
                    icon: icon
                })
                .bindPopup("I Am " + i); //绑定气泡窗口
            ciLayer.addLayer(marker);
        }
    </script>
</body>

</html>